<page-header-wrapper [title]="null">
  <nz-card [nzBordered]="false" class>
    <div nz-row>
      <div nz-col [nzXs]="24" [nzSm]="8" class="header-info">
        <span class="text-grey-dark">我的待办</span>
        <span class="d-block display-2">8个任务</span>
        <em></em>
      </div>
      <div nz-col [nzXs]="24" [nzSm]="8" class="header-info">
        <span class="text-grey-dark">本周任务平均处理时间</span>
        <span class="d-block display-2">32分钟</span>
        <em></em>
      </div>
      <div nz-col [nzXs]="24" [nzSm]="8" class="header-info">
        <span class="text-grey-dark">本周完成任务数</span>
        <span class="d-block display-2">24个任务</span>
      </div>
    </div>
  </nz-card>
  <nz-card [nzBordered]="false">
    <div class="d-flex align-items-center mb-lg">
      <h3 class="flex-1 text-lg">标准列表</h3>
      <div>
        <nz-radio-group [(ngModel)]="q.status" class="mr-md">
          <label nz-radio-button [nzValue]="'all'">
            <span>全部</span>
          </label>
          <label nz-radio-button [nzValue]="'progress'">
            <span>进行中</span>
          </label>
          <label nz-radio-button [nzValue]="'waiting'">
            <span>等待中</span>
          </label>
        </nz-radio-group>
        <nz-input-group nzSuffixIcon="search" style="width: 270px;">
          <input type="text" nz-input placeholder="请输入" [(ngModel)]="q.q" name="q">
        </nz-input-group>
      </div>
    </div>
    <button nz-button (click)="openEdit()" [nzType]="'dashed'" nzBlock class="mb-sm">
      <i nz-icon nzType="plus"></i>
      <span>添加</span>
    </button>
    <nz-list [nzDataSource]="data" [nzLoading]="loading" [nzRenderItem]="item" [nzPagination]="pagination">
      <ng-template #item let-item>
        <nz-list-item [nzContent]="nzContent" [nzActions]="[edit, op]">
          <ng-template #edit>
            <a (click)="openEdit(item)">编辑</a>
          </ng-template>
          <ng-template #op>
            <a class="ant-dropdown-link" nz-dropdown [nzDropdownMenu]="opMenu">
              更多
              <i nz-icon nzType="down"></i>
            </a>
            <nz-dropdown-menu #opMenu="nzDropdownMenu">
              <ul nz-menu>
                <li nz-menu-item (click)="openEdit(item)">编辑</li>
                <li nz-menu-item (click)="remove(item.title)">删除</li>
              </ul>
            </nz-dropdown-menu>
          </ng-template>
          <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="item.subDescription" [nzAvatar]="nzAvatar">
            <ng-template #nzTitle>
              <a href="{{ item.href }}" target="_blank">{{ item.title }}</a>
            </ng-template>
            <ng-template #nzAvatar>
              <nz-avatar [nzSrc]="item.logo" nzSize="large" [nzShape]="'square'"></nz-avatar>
            </ng-template>
          </nz-list-item-meta>
          <ng-template #nzContent>
            <div class="width-md">
              <div class="d-flex text-grey-dark">
                <div class="flex-1">
                  Owner
                  <p>{{ item.owner }}</p>
                </div>
                <div class="text-right">
                  开始时间
                  <p>{{ item.createdAt | _date }}</p>
                </div>
              </div>
              <nz-progress [nzPercent]="item.percent" [nzStatus]="item.status" [nzStrokeWidth]="6"></nz-progress>
            </div>
          </ng-template>
        </nz-list-item>
      </ng-template>
      <ng-template #pagination>
        <nz-pagination [nzTotal]="50" [nzPageSize]="5" (nzPageIndexChange)="getData()"></nz-pagination>
      </ng-template>
    </nz-list>
  </nz-card>
</page-header-wrapper>